import React, { Component } from 'react'
import { NavBar, Image  } from 'components'

export default class Promotions extends Component<any, any> {

    public state = {
        data: [
            {
                messageTime: '11:11',
                messageImg: require('../../../assets/myMessage_promotions.png'),
                messageTitle: '运动户外 狂欢3天开始啦！',
                messageText: '夏日炎炎，参颓气燥，送礼嘉轩，立减100元。送亲朋好友倍儿面儿~~'
            },
            {
                messageTime: '11:31',
                messageImg: require('../../../assets/myMessage_promotions.png'),
                messageTitle: '运动户外 狂欢3天开始啦！',
                messageText: '夏日炎炎，参颓气燥，送礼嘉轩，立减100元。送亲朋好友倍儿面儿~~'
            },
            {
                messageTime: '11:41',
                messageImg: require('../../../assets/myMessage_promotions.png'),
                messageTitle: '运动户外 狂欢3天开始啦！',
                messageText: '夏日炎炎，参颓气燥，送礼嘉轩，立减100元。送亲朋好友倍儿面儿~~'
            }
        ]
    }

    public render (): JSX.Element {
        const { data } = this.state
        return (
            <section className="promotions">
                <div className="promotions_placehoder">
                    <div className="promotions_top">
                        <NavBar 
                            title="优惠促销"
                        />
                    </div>
                </div>
                {
                    data.map((item: any, index: number) => {
                        return (
                            <div className="promotions_content" key={index}>
                                <div className="promotions_content_card">
                                    <div className="promotions_content_card_timeWrap">
                                        <div className="promotions_content_card_time">{item.messageTime}</div>
                                    </div>
                                    <div className="promotions_content_card_container">
                                        <Image src={item.messageImg}/>
                                        <div className="promotions_content_card_container_text">
                                            <div className="promotions_content_card_container_title">
                                                <p>{item.messageTitle}</p>
                                                <div>
                                                    {item.messageText}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
            </section>
        )
    }
}